import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Image } from 'components/atoms';
import {
  colors,
  FormControl,
  OutlinedInput,
  InputAdornment,
  Button,

} from '@material-ui/core';
import { Icon } from 'components/atoms';
import { SectionHeader } from 'components/molecules';
import { Section } from 'components/organisms';
import { useDispatch, useSelector } from 'react-redux'
import { setSearchKey } from '../../../../redux/actions/SearchMembersAction'
import { callGetApi } from 'utils/networking';

const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    height: '100%',
    position: 'relative',
    minHeight: 400,
    maxHeight: 600,
    backgroundSize: 'cover',
  },
  image: {
    minHeight: 400,
    maxHeight: 600,
  },
  section: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
  },
  textWhite: {
    color: 'white',
  },
  searchInputContainer: {
    background: theme.palette.background.paper,
    padding: theme.spacing(2),
    boxShadow: '0 4px 14px 0 rgba(0, 0, 0, 0.11)',
    borderRadius: theme.spacing(1),
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    '& .MuiOutlinedInput-notchedOutline': {
      border: '0 !important',
    },
    '& .MuiInputAdornment-positionStart': {
      marginRight: theme.spacing(2),
    },
    '& .MuiOutlinedInput-adornedStart': {
      paddingLeft: 0,
    },
    '& .MuiOutlinedInput-input': {
      padding: 0,
    },
    [theme.breakpoints.down('sm')]: {
      padding: theme.spacing(1),
    },
  },
  searchButton: {
    maxHeight: 45,
    minWidth: 135,
    [theme.breakpoints.down('sm')]: {
      minWidth: 'auto',
    },
  },
}));

const Hero = props => {

  const { data, className, ...rest } = props;
  const classes = useStyles();
  const theme = useTheme();
  const [searchKeyword, setSearchKeyword] = useState("");
  const [cover, setCover] = useState({
    "title": "Vote Vote Vote",
    "sub_title": "You can vote artists here",
    "image": "http://crd.crowdded.com/assets/uploads/cover_photos/cover_image_1672757845452.png",
    "link": ""
  })

  const profileData = useSelector((state) => state.auth.profileData)
  const dispatch = useDispatch()
  const searchAction = () => {
    dispatch(setSearchKey(searchKeyword));
  }

  useEffect(() => {
    getServerSideProps();
  }, [])

  const getServerSideProps = async () => {
    callGetApi('cover/covers_and_reviews', dispatch, (data) => {
      setCover(data.voting);
    })
  }

  return (
    <div className={clsx(classes.root, className)} {...rest}>
      <Image
        src={cover.image ? cover.image : "https://assets.maccarianagency.com/the-front/photos/rental/hero-bg-image.jpg"}
        srcSet={cover.image ? cover.image : "https://assets.maccarianagency.com/the-front/photos/rental/hero-bg-image@2x.jpg 2x"}
        alt="..."
        className={classes.image}
        lazyProps={{
          width: '100%',
          height: '100%',
        }}
      />
      <Section className={classes.section}>
        <SectionHeader
          title={
            <span className={classes.textWhite}>{cover.title ? cover.title : "Connect with your friends"}</span>
          }
          subtitle={
            <span className={classes.textWhite}>
              {cover.sub_title ? cover.sub_title : "Follow to send messages"}
            </span>
          }
          align="left"
          titleVariant="h3"
          data-aos="fade-up"
        />
        <div className={classes.searchInputContainer} data-aos="fade-up">
          <FormControl fullWidth variant="outlined">
            <OutlinedInput
              size="large"
              onChange={event => setSearchKeyword(event.target.value)}
              startAdornment={
                <InputAdornment position="start">
                  <Icon
                    fontIconClass="fas fa-search"
                    fontIconColor={theme.palette.primary.dark}
                  />
                </InputAdornment>
              }
              placeholder="Search by name"
            />
          </FormControl>
          <Button
            color="primary"
            variant="contained"
            size="large"
            className={classes.searchButton}
            onClick={searchAction}
          >
            Search
          </Button>
        </div>
      </Section>
    </div>
  );
};

Hero.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
};

export default Hero;
